<template>
  <div class="file-preview">
    <div class="handle-button" v-if="activeId">
      <span class="download-count-label">已下载：{{ activeItem.downloadCount }}次</span>
      <a-button @click="downloadFile">下载文件</a-button>
      <a-button status="danger" @click="removeFile" v-if="invoiceStatus !== 'FINISHED'">删除文件</a-button>
    </div>
    <div class="card-group">
      <a-empty description="暂无文件" v-if="!props.fileList.length"></a-empty>
      <div class="card-item" :class="{active: activeId === item.uid}" v-for="item in props.fileList" @click="clickFile(item)">
        <div class="icon">
          <img src="@/assets/img/fileIcon/pdf.svg" v-if="fileIsPdf(item)" alt="">
          <img src="@/assets/img/fileIcon/pic.svg" v-else-if="fileIsPic(item)" alt="">
          <img src="@/assets/img/fileIcon/other.svg" v-else alt="">
        </div>
        <div class="file-name">{{ item.name }}</div>
      </div>
    </div>
    <div class="preview-area" v-if="previewShow">
      <iframe v-if="isPdf" :src="activeItem.url" frameborder="0"></iframe>
<!--      <img v-else-if="isPic" :src="activeItem.url" frameborder="0" />-->
      <a-image v-else-if="isPic" :src="activeItem.url"></a-image>
      <a-empty description="该文件暂不支持预览，请下载后查看" v-else></a-empty>
    </div>
  </div>
</template>

<script setup lang="ts">

import {computed, PropType, reactive, ref, watch} from "vue";
import { removeFile as removeFileApi } from "@/api/fileController.ts";
import {Message, Modal} from "@arco-design/web-vue";

const emit = defineEmits(['change'])

const activeId = ref('')
const activeItem = reactive({
  uid: '',
  name: '',
  url: ''
})
const isPdf = computed(() => {
  return activeItem.name.endsWith('.pdf')
})
const isPic = computed(() => {
  // 判断文件名后缀是否为图片
  return fileIsPic(activeItem)?.length > 0
  // return activeItem.name.match(/.jpg|.jpeg|.png|.gif|.bmp$/gi)
})
const previewShow = ref(false)
const fileIsPdf = (item) => {
  return item.name.endsWith('.pdf')
}
const fileIsPic = (item) => {
  return item.name.match(/.jpg|.jpeg|.png|.gif|.bmp$/gi)
}

const clickFile = (item) => {
  activeId.value = item.uid
  Object.assign(activeItem, item)
}
const downloadFile = () => {
  const mode = import.meta.env.MODE;
  if(mode === 'development') {
    window.open('/api/file/downloadFile?fileId=' + activeItem.uid)
  } else {
    window.open('/file/downloadFile?fileId=' + activeItem.uid)
  }
}
const removeFile = () => {
  Modal.confirm({
    title: '删除文件',
    content: '确定删除该文件吗？',
    onOk: () => {
      removeFileApi(activeItem.uid).then(res => {
        if(res) {
          Message.success('删除成功')
          emit('remove', activeItem)
        }
      })
    }
  })
}

const props = defineProps({
  fileList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  invoiceStatus: {
    type: String as PropType<string>,
  }
})

watch(() => props.fileList, (val: any[]) => {
  if(val.length) {
    activeId.value = val[0].uid
    Object.assign(activeItem, val[0])
    previewShow.value = true
  } else {
    previewShow.value = false
  }
}, {deep: true, immediate: true})
</script>

<style lang="scss" scoped>
.file-preview {
  position: relative;
  margin-top: 20px;
  .handle-button {
    position: absolute;
    top: -52px;
    right: 0;
    .download-count-label {
      font-size: 12px;
      color: #999999;
      margin-right: 10px;
    }
  }
  .card-group {
    display: flex;
    overflow-x: auto;
    .card-item {
      display: flex;
      align-items: center;
      background-color: #f2f3f5;
      padding: 5px 10px;
      border-radius: 8px;
      cursor: pointer;
      margin-right: 10px;
      .icon img {
        width: 30px;
      }
      .file-name {
        white-space: nowrap;
      }

      &:hover {
        color: rgb(var(--arcoblue-6));
      }
      &.active {
        border: 1px solid rgb(var(--arcoblue-6));
      }
    }
  }

  .preview-area {
    margin-top: 20px;
    iframe {
      width: 100%;
      height: 60vh;
      min-height: 400px;
    }

    :deep(.arco-image) {
      .arco-image-img {
        width: 100%;
      }
    }
  }
}
</style>
